import React from "react";
import { NavLink } from "react-router-dom";

import {Top, TopItem} from './listData.style'

import ListItem from '../listItem/ListItem'

import loading from '@/assets/images/loading.gif'

export default function ListData({list, isScrollToButtom}) {

  return (
    <>
    <Top>
        <NavLink to="/home/main" activeClassName="selected">
            <TopItem>
                <div className="personal-info-card">
                    <div className="personal-info-num">生活百科</div>
                    <div className="personal-info-num-name">爱生活</div>
                </div>
            </TopItem>
        </NavLink>
        {/*  */}
        <NavLink to="/a" activeClassName="selected">
        <TopItem>
                <div className="personal-info-card">
                    <div className="personal-info-num">健康生活</div>
                    <div className="personal-info-num-name">关注健康</div>
                </div>
            </TopItem>
        </NavLink>
        <NavLink to="/b" activeClassName="selected">
        <TopItem>
                <div className="personal-info-card">
                    <div className="personal-info-num">宝爸宝妈</div>
                    <div className="personal-info-num-name">育儿指南</div>
                </div>
            </TopItem>
        </NavLink>
        <NavLink to="/c" activeClassName="selected">
    <TopItem>
            <div className="personal-info-card">
                <div className="personal-info-num">家居改造</div>
                <div className="personal-info-num-name">
                      <span>该造家</span> </div>
            </div>
        </TopItem>
    </NavLink>
    </Top>
    {
      list.length === 0 ? '' : list.map((item,index) => {
        console.log(item)
        return <ListItem key={item.id} item={item} />
      })
    }
    {
      isScrollToButtom ? <img src={loading} /> : ''
    }
    </>
  )
  
}